/**
 * 首页底部组件
 */
<script setup>
import PureChart from '@/components/home/HomeCharts/PureChart.vue'
import DirectChart from '@/components/home/HomeCharts/DirectChart.vue'
import WarehousingChart from '@/components/home/HomeCharts/WarehousingChart.vue'
import CompletedChart from '@/components/home/HomeCharts/CompletedChart.vue'
import ProportionChart from '@/components/home/HomeCharts/ProportionChart.vue'
import PPHChart from '@/components/home/HomeCharts/PPHChart.vue'
import ProgressChart from '@/components/home/HomeCharts/ProgressChart.vue'

import { useWarehousingStore, useCompletedStore, useProportionStore, useProgressStore } from '@/stores/home'

const warehousingStore = useWarehousingStore()
const completedStore = useCompletedStore()
const proportionStore = useProportionStore()
const progressStore = useProgressStore()
</script>

<template>
  <div class="home-bottom-container">
    <div class="home-bottom-item">
      <PureChart/>
    </div>

    <div class="home-bottom-item">
      <DirectChart/>
    </div>

    <div @click="warehousingStore.show()" class="home-bottom-item home-bottom-item-light">
      <WarehousingChart/>
    </div>

    <div class="home-bottom-item" style="border: none;">
      <div @click="completedStore.show()" class="home-bottom-item-left home-bottom-item-light">
        <CompletedChart/>
      </div>

      <div @click="proportionStore.show()" class="home-bottom-item-right home-bottom-item-light">
        <ProportionChart/>
      </div>
    </div>

    <div class="home-bottom-item">
      <PPHChart/>
    </div>

    <div @click="progressStore.show()" class="home-bottom-item home-bottom-item-light">
      <ProgressChart/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-bottom-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;

  .home-bottom-item {
    width: 37%;
    height: 31%;
    box-sizing: border-box;
    border: 0.5vh solid #40436e;
    border-radius: 1.25vh;
    pointer-events: auto;

    .home-bottom-item-left, .home-bottom-item-right {
      display: inline-block;
      width: 49.5%;
      height: 100%;
      box-sizing: border-box;
    }

    .home-bottom-item-left {
      border: 0.5vh solid #40436e;
      border-radius: 1.25vh;
      margin-right: 0.5%;
    }

    .home-bottom-item-right {
      border: 0.5vh solid #40436e;
      border-radius: 1.25vh;
      margin-left: 0.5%;
    }
  }

  .home-bottom-item-light {
    transition: all 0.25s ease-in-out;

    &:hover {
      border-color: #406e43;
    }
  }
}
</style>